<!--设置语言页面-->
<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("setting.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-row :gutter="20" style="height:60%;width:60%;">
            <el-col :span="12">
                <div @click="setDefaultLanguage('zh-CN')">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);cursor: pointer;">
                        {{$t("setting.route.language.china")}}
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div @click="setDefaultLanguage('en')">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);cursor: pointer;">
                        {{$t("setting.route.language.english")}}
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            currentLang: ''
        };
    },
    mounted() {
        console.log(localStorage.lang);
        this.currentLang = localStorage.lang == undefined ? 'cn' : localStorage.lang;
    },
    methods: {
        showMainPage() {
            //显示预约页面
            this.$router.push({
                path: '/setting/index'
            });
        },
        setDefaultLanguage(lang) {
            localStorage.setItem('lang', lang);
            this.$i18n.locale = lang;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}
</style>
